<template>
  <div class="content">
    <div class="message">
      <v-input v-model="username"></v-input>
      <v-textarea v-model="message" ref="message"></v-textarea>
      <button @click="handleSend">发布</button>
    </div>
    <list @reply="handleReply" :list="list"></list>
  </div>
</template>
<script>
import VInput from './subComponents/VInput';
import VTextarea from './subComponents/VTextArea';
import List from './subComponents/List';
export default {
  components:{
    VInput,
    VTextarea,
    List
  },
  data(){
    return{
      username: '',
      message: '',
      list: [],
    }
  },
  methods: {
    handleReply(index){
      var name = this.list[index].name;
      this.message = '回复@' + name + '：';
      //console.log('refs',this.$refs.message)
      this.$refs.message.focus();
    },
    handleSend() {
      //console.log('昵称是：',this.username)
      //console.log('内容是：',this.message)
      if(!this.username){
        alert('请输入昵称');
        return;
      }
      if(!this.message){
        alert('请输入留言内容');
        return;
      }
      this.list.push({
        name: this.username,
        message: this.message
      })
      this.message = '';
    }
  }
 
}
</script>
<style>
.content{
  margin: 0 auto;
  border:1px solid #ccc;
  padding:20px;
}
.message{
  width:450px;
  text-align: right;
}
.message div{
  margin-bottom: 12px;
}
.message span{
  display: inline-block;
  width: 100px;
  vertical-align: top;
}
.message input, .message textarea{
  width: 300px;
  height: 32px;
  padding: 0 6px;
  color: #657180;
  border: 1px solid #d7dde4;
  border-radius: 4px;
  cursor: text;
  outline: none;
}
.message input:focus, .message textarea:focus{
  border: 1px solid #3399ff;
}
.message textarea{
  height: 60px;
  padding: 4px 6px;
}
.message button{
  display: inline-block;
  padding: 6px 15px;
  border: 1px solid #39f;
  border-radius: 4px;
  color: #fff;
  background-color: #39f;
  cursor: pointer;
  outline: none;
}
.list{
  margin-top: 50px;
}
.list-item{
  padding: 10px;
  border-bottom: 1px solid #e8e8ee;
  overflow: hidden;
}
.list-item span{
  display: block;
  width: 60px;
  float: left;
  color: #39f;
}
.list-msg{
  display: inline-block;
  margin-left: 60px;
  text-align: justify;
}
.list-msg a{
  color: #9ea7b4;
  cursor: pointer;
  float: right;
}
.list-msg a:hover{
  color: #39f;
}
.list-nothing{
  text-align: center;
  color: #9ea7b4;
  padding: 20px;
}
</style>


